<template>
  <div id="codeModelTable">
    <el-table
      
      :data="tableData"
      stripe
      height="65vh"
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}"
      style="width: 100%;overflow-x: hidden;">
      <el-table-column
        prop="id"
        label="序号"
        width="150"
        fixed>
      </el-table-column>

      <el-table-column
        prop="codeType"
        label="代码标识"
        width="150"
        fixed>
      </el-table-column>

      <el-table-column
        prop="name"
        label="代码名称"
        width="150"
        fixed>
      </el-table-column>

      <el-table-column
        prop="seqType"
        label="模型类型"
        width="150">
        <template slot-scope="scope">
          <bms-table-text :value="scope.row.seqType" codeType="CODE_MODEL_TYPE_DICT"></bms-table-text>
        </template>
      </el-table-column>

      <el-table-column
        prop="categories"
        width="150"
        label="分类">
        <template slot-scope="scope">
          <bms-table-text :value="scope.row.categories" codeType="CODE_MODEL_CATEGROIES_DICT"></bms-table-text>
        </template>
      </el-table-column>


      <el-table-column
        prop="textField"
        width="150"
        label="显示字段">
      </el-table-column>


      <el-table-column
        prop="valueField"
        width="150"
        label="值字段">
      </el-table-column>

      <el-table-column
        prop="orderBy"
        width="150"
        label="排序">
      </el-table-column>

      <el-table-column
        prop="cachePageTime"
        width="150"
        label="缓存时间（ms）">
        <template slot-scope="scope">
          <span v-if="scope.row.cachePageTime <= 0">永久</span>
          <span v-else>{{scope.row.cachePageTime}}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="createTime"
        width="160"
        :formatter="bms_long"
        label="创建时间">
      </el-table-column>

      <el-table-column
        prop="modifyTime"
        width="160"
        :formatter="bms_long"
        label="修改时间">
      </el-table-column>


      <el-table-column
        prop="enable"
        fixed="right"
        width="150"
        label="启用">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.enable"
            @change="changeStatus(scope.row.id)"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="showUse(scope.row)" type="text" size="small">示例</el-button>
          <el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <codeModelDialog ref="children" @refreshData="selectCodeModelInfo" />
    <codeModelDemo ref="childrenDemo"></codeModelDemo>

  </div>
</template>

<script>
import tool from '@/assets/js/tool'
import codeModelDialog from './dialog.vue';
import codeModelDemo from './demo.vue'
import BmsTableText from '@/components/quick/ui/bms-table-text.vue'
import {
  deleteCodeModel,enableCodeModel
} from '@/assets/request/api'
export default {
  components: { codeModelDialog,BmsTableText,codeModelDemo},
  name: 'codeModelTable',
  props: ['tableCodeModelData'],
  mixins: [tool],
  data() {
    return {
      tableData: [],
    }
  },
  methods: {
    selectCodeModelInfo() {
      this.$emit("selectCodeModel",{ })
    },
    handleClick(row) {
      this.$refs.children.receiveParent(row)
    },
    deleteCodeModel(codeModelId) {
      deleteCodeModel(codeModelId).then(res => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.$emit("selectCodeModel",{ })
      }).catch(err => {
        this.$message({
          type: 'error',
          message: err.message
        });
      })
    },
    deleteClick(row) {
      this.$confirm('此操作将删除账户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteCodeModel(row.id)        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    changeStatus(value) {
      enableCodeModel(value).then(res => {
        this.$message({
          type: 'success',
          message: '启用成功'
        });
      }).catch(err => {
        this.$message({
          type: 'error',
          message: err.message
        });
      })
    },
    showUse(row) {
      this.$refs.childrenDemo.receiveParent(row)
    }
  },
  mounted() {
    
  },
  watch: {
    tableCodeModelData: {
      deep: true,         // 深度监听
      immediate: false,    // immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，
      handler(newValue,oldValue) {
        this.tableData = newValue
        this.$emit('changeLoad',false)
      }
    },
    
  }
    
}
</script>

<style scoped>


 
</style>
